<template>
	<div class="govern-result">
		<component
			:is="formSlot"
			cancelType="primary"
			confirmText="确认"
			@onSubmit="onSubmit"
		>
			<h3 class="h3-before">1.建设人员疏散通道</h3>
			<van-field
				disabled
				v-model="formData.mzltlj"
				label="已满足两条路径(栋)"
			/>
			<van-field
				disabled
				v-model="formData.zzfasl"
				label="制作方案(个)"
			/>
			<van-field
				disabled
				v-model="formData.zzsgsl"
				label="正在施工(个)"
			/>

			<h3 class="h3-before">2.严禁电动自行车进楼入户充电、停放</h3>
			<van-field
				disabled
				v-model="formData.qlddzxcsl"
				label="清理电动自行车数量(辆次)"
			/>

			<h3 class="h3-before">3.加强充电设施建设和优化收费管理</h3>
			<van-field
				class="field-no-border"
				v-model="formData.qcxycdjk"
				label="a.全村经营性自建房区域现有（截至2023年）充电设施接口(个)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				class="field-column"
				:class="{ 'field-no-border': formData.istwotoone || formData.isonetoone }"
				label="2024年补建充电设施接口(个)"
				placeholder="请输入"
			>
				<template #input>
					<div style="display: flex; gap: 12px">
						<van-checkbox v-model="formData.istwotoone" shape="square">按2:1补建</van-checkbox>
						<van-checkbox v-model="formData.isonetoone" shape="square">按1:1补建</van-checkbox>
					</div>
				</template>
			</van-field>
			<van-field
				v-if="formData.istwotoone"
				v-model="formData.twotoone"
				label="按2:1补建(个)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				v-if="formData.isonetoone"
				v-model="formData.onetoone"
				label="按1:1补建(个)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				class="field-column"
				:class="{ 'field-no-border': formData.bjcdfs?.includes('其他') }"
				required
				label="补建充电方式"
				placeholder="请选择"
				:rules="validator.boolean"
			>
				<template #input>
					<van-checkbox-group v-model="formData.bjcdfs" direction="horizontal">
						<van-checkbox
							v-for="item in echoData.chargeEnum"
							:name="item"
							:key="item"
							shape="square"
						>
							{{ item }}
						</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>
			<van-field
				v-if="formData.bjcdfs?.includes('其他')"
				v-model="formData.bjcdfsqt"
				required
				class="field-column field-textarea"
				placeholder="补建充电其他方式"
				type="textarea"
				:rules="validator.desc"
			/>
			<van-field
				v-model="formData.tzzfybjcdssjk"
				required
				placeholder="请输入"
				label="2024年已补建充电设施接口(个)"
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				v-model="formData.wwcbjssyjbjwcsj"
				required
				placeholder="请输入"
				label="未完成补建设施预计补建完成月份(2024年)"
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				disabled
				v-model="formData.qcddzxcsl"
				label="b.全村经营性自建房区域在用电动自行车(辆)"
			/>
			<van-field
				v-model="formData.cddf"
				class="field-column"
				label="c.现有充电设施电费情况(元/度)"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.cddf" direction="horizontal">
						<van-radio
							v-for="item in echoData.electric"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field
				v-model="formData.bjcdssdfqk"
				class="field-column"
				label="补建充电设施电费情况(元/度)"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.bjcdssdfqk" direction="horizontal">
						<van-radio
							v-for="item in echoData.electric"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field
				v-model="formData.sfsqfwftcf"
				label="是否收取服务费、停车费等其它费用"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.sfsqfwftcf" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field
				v-if="+formData.sfsqfwftcf === 1"
				class="field-column"
				placeholder="请选择"
				:rules="validator.boolean"
			>
				<template #input>
					<van-checkbox-group v-model="formData.sqfydcdzt" direction="horizontal">
						<van-checkbox
							v-for="item in echoData.mainBody"
							:name="item"
							:key="item"
							shape="square"
						>
							{{ item }}
						</van-checkbox>
					</van-checkbox-group>
				</template>
			</van-field>

			<h3 class="h3-before">4.降低瓶装液化石油气使用风险</h3>
			<van-field
				disabled
				v-model="formData.qlyhsyqpsl"
				label="清理液化石油气瓶数量(个次)"
			/>

			<h3 class="h3-before">5.完善消防车通道、水源，拆除防护网</h3>
			<van-field
				class="field-no-border"
				v-model="formData.xfctdsl"
				label="a.消防车通道共有(条)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				v-model="formData.xfctdslxz"
				label="新增消防车通道(条)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>
			<van-field
				class="field-no-border"
				v-model="formData.sfszszxhs"
				label="b.是否设置市政消火栓"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.sfszszxhs" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<!--<template>-->
				<van-field
					v-model="formData.abzjsxfscsl"
					label="b-1.按标准建设消防水池(个)"
					placeholder="请输入"
					required
					type="digit"
					:rules="validator.number"
				/>
				<van-field
					v-model="formData.pzxfsb"
					label="b-2.配置消防水泵(个)"
					placeholder="请输入"
					required
					type="digit"
					:rules="validator.number"
				/>
				<van-field
					v-model="formData.jsswxhs"
					label="b-3.建设室外消火栓(个)"
					placeholder="请输入"
					required
					type="digit"
					:rules="validator.number"
				/>
			<!--</template>-->
			<van-field
				v-model="formData.ccfhwggptzlsl"
				label="c.拆除窗口、疏散通道上影响人员逃生和灭火救援的防护网、广告牌、铁栅栏(个)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>

			<h3 class="h3-before">6.加强自防自救力量建设</h3>
			<van-field
				disabled
				v-model="formData.sjjzrksl"
				label="实际居住人口数量(人)"
			/>
			<van-field
				v-model="formData.sfjszzxfdhxxxfz"
				label="a.是否建设专职消防队或小型消防站"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.sfjszzxfdhxxxfz" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>
			<van-field
				v-model="formData.sfjswxxfz"
				label="b.是否建设微型消防站"
				required
				:rules="validator.boolean"
			>
				<template #input>
					<van-radio-group v-model="formData.sfjswxxfz" direction="horizontal">
						<van-radio
							v-for="item in echoData.boolean"
							:name="item.value"
							:key="item.value"
						>
							{{ item.label }}
						</van-radio>
					</van-radio-group>
				</template>
			</van-field>

			<h3 class="h3-before">7.开展逐栋逐层、逐户逐人宣传警示</h3>
			<van-field
				disabled
				v-model="formData.azgdjsbpsl"
				label="安装固定警示标牌(个)"
			/>
			<van-field
				v-model="formData.fftstysl"
				label="张贴宣传海报和发放提示图页(份)"
				placeholder="请输入"
				required
				type="digit"
				:rules="validator.number"
			/>

			<h3 class="h3-before">8.完善治本之策和保障措施</h3>
			<van-field
				class="field-textarea field-column"
				v-model="formData.wszbzchbzcs"
				label="a.标题"
				placeholder="请输入"
				type="textarea"
			/>
			<van-field
				class="field-column"
				label="上传附件"
			>
				<template #input>
					<component
						:is="uploadFile"
						:accept="['jpeg', 'jpg', 'png', 'doc', 'docx']"
						v-model="formData.fj"
					/>
				</template>
			</van-field>
		</component>
	</div>
</template>

<script setup>
import formSlot from '@/components/formSlot'
import { ref, reactive, onMounted } from 'vue'
import uploadFile from '@/components/uploadFile'
import { getRes, updateRes } from '@/service/village'
import { useLoginStore } from '@/store'
import { storeToRefs } from 'pinia'
import { Dialog } from 'vant'
import { useRouter } from 'vue-router'

const router = useRouter()
const loginStore = useLoginStore()
const { loginInfo } = storeToRefs(loginStore)

const validateNumber = (val) =>
	new Promise((resolve) => {
		if (val && val >= 0) {
			resolve(true)
		} else {
			resolve(false)
		}
	})

const numberKey = [
	'mzltlj',
	'zzfasl',
	'zzsgsl',
	'qlddzxcsl',
	'qcxycdjk',
	'qcxzcdjk',
	'qcddzxcsl',
	'cddf',
	'sfsqfwftcf',
	'qlyhsyqpsl',
	'xfctdsl',
	'sfszszxhs',
	'abzjsxfscsl',
	'pzxfsb',
	'jsswxhs',
	'ccfhwggptzlsl',
	'sjjzrksl',
	'sfjszzxfdhxxxfz',
	'sfjswxxfz',
	'azgdjsbpsl',
	'fftstysl',
	'xfctdslxz',
	'tzzfybjcdssjk',
	'bjcdssdfqk',
	'twotoone',
	'onetoone',
]
const stringKey = [
	'wszbzchbzcs',
	'wwcbjssyjbjwcsj',
	'bjcdfsqt',
]
const booleanKey = [
	'istwotoone',
	'isonetoone',
]
const arrayKey = [
	'bjcdfs',
	'sqfydcdzt',
]

const initData = ref({})
const formData = reactive({
	fj: []
})

const echoData = {
	boolean: [
		{ label: '是', value: '1' },
		{ label: '否', value: '0' }
	],
	electric: [
		{ label: '大于0.513', value: '1' },
		{ label: '等于0.513', value: '2' },
		{ label: '小于0.513', value: '3' },
	],
	chargeEnum: [
		'单插口',
		'集中充电桩',
		'单仓',
		'充(换)电柜',
		'其他',
	],
	mainBody: [
		'房东',
		'村集体',
		'区财政',
		'其他',
	]
}

const validator = {
	boolean: [{ required: true, message: '请选择' }],
	image: [{ required: true, message: '请上传' }],
	desc: [{ required: true, message: '请输入' }],
	number: [
		{ required: true, message: '请输入' },
		{ validator: validateNumber, message: '请输入正数' }
	],
}

const getData = async () => {
	const result = await getRes({
		villagedm: loginInfo.value?.villagedm
	})
	initData.value = result?.data
	numberKey.map(item => {
		formData[item] = (result?.data?.[item] || result?.data?.[item] === 0) ? +result?.data?.[item] : ''
	})
	stringKey.map(item => {
		formData[item] = result?.data?.[item]
	})
	booleanKey?.map(item => {
		formData[item] = result?.data?.[item] === 1
	})
	arrayKey?.map(item => {
		formData[item] = result?.data?.[item]?.split('|')
	})
	formData.fj = result?.data?.fj?.split('|')?.map(item => {
		return {
			url: item,
			status: 'done'
		}
	})
}

const onSubmit = async () => {
	const params = {
		xzqdm: loginInfo.value.xzqdm,
		towndm: loginInfo.value.towndm,
		villagedm: loginInfo.value.villagedm,
	}
	numberKey.map(item => {
		params[item] = +formData[item]
	})
	stringKey.map(item => {
		params[item] = formData[item]
	})
	booleanKey?.map(item => {
		params[item] = formData[item] === true ? 1 : 0
	})
	arrayKey?.map(item => {
		params[item] = formData[item]?.join('|')
	})
	params.fj = formData.fj?.map(item => {
		return item.url
	})?.join('|')


	Dialog.confirm({
		message: '确认提交？',
	}).then(() => {
		confirmSubmit(params)
	})
}

const confirmSubmit = async (params) => {
	try {
		const result = await updateRes(params)
		if (result.succ) {
			Dialog.alert({
				message: '提交成功',
			}).then(() => {
				router.back()
			})
		}
	} catch (e) {
		//
	}
}

onMounted(() => {
	getData()
})
</script>

<style scoped lang="less">
.govern-result {
	height: 100%;
	h3 {
		margin: 24px 0 12px;
	}
	:deep(.van-checkbox) {
		.van-icon {
			height: 32px;
			width: 32px;
			line-height: 32px;
			font-size: 28px;
		}
	}
	.data-field {
		width: 100%;
		background: #fff;
		p {
			height: 54px;
			line-height: 54px;
			margin: 0 32px;
			padding: 24px 0;
			border-bottom: 2px solid var(--van-border-color);
			span {
				color: var(--van-primary-color);
			}
		}
	}
}
</style>
